<template>
  <div class="input-demo">
    <h3>📝 自定义输入框（支持 v-model）</h3>
    <input type="text" :value="modelValue" @input="onInput" placeholder="输入点什么..." />
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['update:modelValue'])

function onInput(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<style scoped>
.input-demo {
  margin: 20px 0;
}
input {
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid #6c757d;
  border-radius: 6px;
  outline: none;
}
input:focus {
  border-color: #007bff;
}
</style>
